import Phaser from 'phaser';

import UtilsLoader from '../../../utils/Utils.loader/UtilsLoader';
import UtilsCoordinateConter from '../../../utils/Utils.coordinate.conter/UtilsCoordinateConter';
import SaveSceneExampleQueue from '../../../utils/Utils.SaveSceneExampleQueue/UtilsSaveSceneExampleQueue';
import UtilsSprite from '../../../utils/Utils.Sprite/UtilsSprite';
import UtilsCreateFrameAnima from '../../../utils/Utils.createFrameAnima/UtilsCreateFrameAnima';
import UtilsDetection from '../../../utils/Utils.Detection/UtilsDetection';
import { Graphical, Line } from '../../../utils/Utils.Graphical/UtilsGraphical';
import UtilsPathFollow from '../../../utils/Utils.PathFollow/UtilsPathFollow';
import { UtilsLightSourceAndCircumferenceForUpdata, UtilsLightSourceAndCircumference } from '../../../utils/Utils.LightSourceAndCircumference/UtilsLightSourceAndCircumference';

export default class SceneUiEnchant extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneUiEnchant'
        });

        this.close = true;
        this.btnCont =  0;
        this.enchantVisible = false;
        this.enchant = null;
        this.enchantWeapon = null;
        this.enchantBtn = null;
        this.enchantWeaponVisible = false;
        this.enchantBtnVisible = false;
        this.circumference = false;
        this.enchantWeaponTop = null;
        this.enchantWeaponBottom = null;

        this.WWC = UtilsCoordinateConter.coordinatrConter('world').WWC;
        this.WHC = UtilsCoordinateConter.coordinatrConter('world').WHC;
        this.WFW = UtilsCoordinateConter.coordinatrConter('worldFull').WFW;
        this.WFH = UtilsCoordinateConter.coordinatrConter('worldFull').WFH;
        this.VWC = UtilsCoordinateConter.coordinatrConter('view').VWC;
        this.VHC = UtilsCoordinateConter.coordinatrConter('view').VHC;
        this.VFW = UtilsCoordinateConter.coordinatrConter('viewFull').VFW;
        this.VFH = UtilsCoordinateConter.coordinatrConter('viewFull').VFH;
    }

    init() {
        console.log('SceneUiEnchant init!');

        SaveSceneExampleQueue.enQueue({
            'SceneUiEnchant': this
        });
    }

    preload() {
        console.log('SceneUiEnchant pre!');

        this.IMAGE_LOAD();

        this.ATLAS_LOAD();

    }

    create() {
        console.log('SceneUiEnchant create!');

        this.enchant = this.add.image(this.VWC, this.VHC, 'enchant_frame')
        .setInteractive()
        .setVisible(this.enchantVisible);

        this.enchantWeapon = this.add.image(this.VWC, this.VHC, 'enchant_weapon')
        .setVisible(this.enchantWeaponVisible);

        this.enchantBtn = this.add.image(this.VWC, this.VHC + this.enchant.height / 2 - 50, 'enchant_btn')
        .setInteractive()
        .setVisible(this.enchantBtnVisible);

        this.CREATE_ATLAS_ANIMA();

        new UtilsSprite([{
            key: 'enchantParticle1',
            spriteKey: 'enchantParticle',
            play: 'enchantParticleAnima',
            sprXY: {
                x: this.VWC - this.enchant.width / 2 + 70,
                y: this.VHC - this.enchant.height / 2 + 150
            },
            scal: .6,
            vis: true
        },{
            key: 'enchantParticle2',
            spriteKey: 'enchantParticle',
            play: 'enchantParticleAnima',
            sprXY: {
                x: this.VWC + this.enchant.width / 2 - 70,
                y: this.VHC + this.enchant.height / 2 - 150
            },
            scal: .6,
            vis: true
        }], 'static', this);

        this.onClick();

    }

    update() {
        if (this.circumference) {
            UtilsLightSourceAndCircumferenceForUpdata.init('enchantParticle3',this);
        }
    }

    IMAGE_LOAD() {
        new UtilsLoader('image', [{
            key: 'enchant_frame',
            path: '/images/phaser/enchant_frame.png'
        }, {
            key: 'enchant_weapon',
            path: '/images/phaser/enchant_weapon.png'
        }, {
            key: 'enchant_btn',
            path: '/images/phaser/enchant_btn.png'
        }, {
            key: 'enchant_weapon_top',
            path: '/images/phaser/enchant_weapon_top.png'
        }, {
            key: 'enchant_weapon_bottom',
            path: '/images/phaser/enchant_weapon_bottom.png'
        }], 'http://localhost:3001', this, (e) => {
            console.log(e);
        });
    }

    ATLAS_LOAD() {
        new UtilsLoader('atlas', [{
            key: 'enchantParticle',
            imagePath: '/images/phaser/enchantParticle/enchantParticle.png',
            jsonPath: '/images/phaser/enchantParticle/enchantParticle.json'
        }], 'http://localhost:3001', this, (e) => {
            console.log(e);
        });
    }

    CREATE_ATLAS_ANIMA() {
        new UtilsCreateFrameAnima([{
            key: 'enchantParticleAnima',
            frames: 'enchantParticle',
            frameRate: 14,
            repeat: -1
        }], this);
    }

    onClick() {
        // on enchantBtn...
        this.enchantBtn.on('pointerdown', () => {
            this.btnCont = 1;
            this.events.emit('onEnchantBtn', '开始附魔!');
        })
        // on enchant
        this.enchant.on('pointerdown', () => {
            this.events.emit('onEnchant', '关闭附魔!');
        })
    }

    ENCHANT_WORKfLOW() {

        /**
         * @summary 开关
         */
        let that = this;
        this.close = false;

        /**
         * @summary 创建图形生成精灵
         * @class 附魔精灵容器
         */
         this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .8
            },
            rec: {
                x: 300,
                y: 300,
                w: 20,
                h: 20
            },
            gen: {
                genKey: 'enchant-weapon-over',
                w: 20,
                h: 20
            },
            vis: true,
            des: true
        }, this));

        /**
         * @summary 附魔精灵容器生成精灵
         */
        new UtilsSprite([{
            key: 'enchantWeaponOver',
            spriteKey: 'enchant-weapon-over',
            sprXY: {
                x: 0,
                y: 0
            },
            ag: false,
            gy: -1,
            boun: -1,
            cwb: true
        }], '', this);

        /**
         * @summary 创建路径坐标生成绘画路径
         */
        let arrLeft = [this.enchantParticle1.x,this.enchantParticle1.y,this.enchantWeapon.x + 6,this.enchantWeapon.y - 10];
        let arrRight = [this.enchantParticle2.x,this.enchantParticle2.y,this.enchantWeapon.x + 20,this.enchantWeapon.y - 60];
        this.drawLine = this.add.existing(new Graphical({
            path: true
        }, this));
        this.creatLineLeft = this.add.existing(new Line(arrLeft, this.drawLine));
        this.creatLineRight = this.add.existing(new Line(arrRight, this.drawLine));

        this.enchantParticle1.setVisible(false);
        this.enchantParticle2.setVisible(false);

        /**
         * @summary 创建附魔精灵路径跟随
         */
        this.followXY1 = this.add.existing(new UtilsPathFollow({
            path: this.creatLineLeft,
            scal: .6,
            x: this.enchantParticle1.x,
            y: this.enchantParticle1.y,
            key: 'enchantParticle',
            playKey: 'enchantParticleAnima',
            starFol: {
                dur: 2000,
                yoyo: false,
                rep: 0,
                rotOff: 0,
                rotPath: true
            }
        }, this));

        /**
         * @summary 附魔精灵容器坐标
         */
        let enchantWeaponOver = setInterval(() => {
            this.enchantWeaponOver.x = this.followXY1.getCenter().x;
            this.enchantWeaponOver.y = this.followXY1.getCenter().y;
        });

        /**
         * @summary 创建附魔精灵路径跟随
         */
        this.followXY2 = this.add.existing(new UtilsPathFollow({
            path: this.creatLineRight,
            scal: .6,
            x: this.enchantParticle2.x,
            y: this.enchantParticle2.y,
            key: 'enchantParticle',
            playKey: 'enchantParticleAnima',
            starFol: {
                dur: 2000,
                yoyo: false,
                rep: 0,
                rotOff: 0,
                rotPath: true
            }
        }, this));

        /**
         * @summary 创建图形生成精灵
         * @class 附魔精灵走向终点容器
         */
         this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .8
            },
            rec: {
                x: this.enchantWeapon.x + 6,
                y: this.enchantWeapon.y - 10,
                w: 20,
                h: 20
            },
            gen: {
                genKey: 'enchant-weapon-end',
                w: 20,
                h: 20
            },
            vis: true,
            des: true
        }, this));

        /**
         * @summary 附魔精灵走向终点容器生成精灵
         */
        new UtilsSprite([{
            key: 'enchantWeaponEnd',
            spriteKey: 'enchant-weapon-end',
            sprXY: {
                x: this.enchantWeapon.x + 6,
                y: this.enchantWeapon.y - 10
            },
            ag: false,
            gy: -1,
            boun: -1,
            cwb: true
        }], '', this);

        /**
         * @summary 监听附魔精灵重叠终点
         */
         new UtilsDetection({
            type: '_overlap',
            key: 'enchantWeaponEnd',
            targetKey: 'enchantWeaponOver'
        }, (e) => {
            clearInterval(enchantWeaponOver);
            this.enchantWeaponOver.destroy(true, true);
            this.followXY1.destroy(true, true);
            this.followXY2.destroy(true, true);

            new UtilsLightSourceAndCircumference({
                updatakey: 'circumference',
                oldWeaponKey: 'enchantWeapon',
                newWeaponKey: [{
                    key: 'enchantWeaponTop',
                    add: {
                        key: 'enchant_weapon_top',
                        x: this.VWC + 8, 
                        y: this.VHC - 40
                    }
                },{
                    key: 'enchantWeaponBottom',
                    add: {
                        key: 'enchant_weapon_bottom',
                        x: this.VWC,
                        y: this.VHC + 51
                    }
                }],
                sprite: {
                    key: 'enchantParticle3',
                    spriteKey: 'enchantParticle',
                    playKey: 'enchantParticleAnima',
                    scal: .3,
                    vis: false
                },
                curve: {
                    x: this.enchantWeapon.x,
                    y: this.enchantWeapon.y,
                    xRa: 30,
                    yRa: 60,
                    rot: 20
                },
                curveTweens: {
                    dura: 3000,
                    rep: -1
                },
                lightWeapon: [{
                    x: this.enchantWeapon.x + 6,
                    y: this.enchantWeapon.y - 10,
                    col: 0x99ff33,
                    ra: 128,
                    int: .1,
                    att: .1,
                    tweens: {
                        ra: 96,
                        yoyo: true,
                        dura: 1500,
                        rep: -1
                    }
                },{
                    x: this.enchantWeapon.x + 20,
                    y: this.enchantWeapon.y - 60,
                    col: 0x99ff33,
                    ra: 128,
                    int: .1,
                    att: .1,
                    tweens: {
                        ra: 96,
                        yoyo: true,
                        dura: 1500,
                        rep: -1
                    }
                }]
            }, function (param) { 
                if ( param === 'done') {
                    that.close = true;
                }
            }, this);
            
        }, this);
        
    }

    RESETTING_WORKfLOW() {
        if (!this.close) return;
        if (this.btnCont) {
            this.enchantWeapon.setVisible(false);
            this.enchantParticle1.setVisible(false);
            this.enchantParticle2.setVisible(false);
            this.defTweens0.destroy(true, true);
            this.defTweens1.destroy(true, true);
            this.enchantWeaponTop.destroy(true, true);
            this.enchantWeaponBottom.destroy(true, true);
            this.enchantParticle3.destroy(true, true);
            this.circumference = false;
            this.enchant.setVisible(false);
            this.enchantBtn.setVisible(false);
        } else {
            this.circumference = false;
            this.enchant.setVisible(false);
            this.enchantWeapon.setVisible(false);
            this.enchantBtn.setVisible(false);
            this.enchantParticle1.setVisible(false);
            this.enchantParticle2.setVisible(false);
        }
    }

}